<template>
  <div class="register-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>用户注册</span>
        </div>
      </template>

      <el-form 
        :model="form" 
        ref="formRef"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="用户名" prop="nickname">
          <el-input 
            v-model="form.nickname" 
            placeholder="请输入用户名"
            clearable
            :prefix-icon="User"
          />
        </el-form-item>
        <el-form-item label="账号" prop="name">
          <el-input 
            v-model="form.name" 
            placeholder="请输入账号"
            clearable
            :prefix-icon="User"
          />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input 
            v-model="form.password" 
            type="password" 
            placeholder="请输入密码" 
            show-password
            clearable
            :prefix-icon="Lock"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input 
            v-model="form.remark" 
            type="textarea" 
            placeholder="请输入备注信息"
            :rows="3"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button 
            type="primary" 
            @click="submitForm" 
            :loading="loading"
            class="register-button"
          >
            注册
          </el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { User, Lock } from '@element-plus/icons-vue';
import { registerUser } from '@/api/user';

const formRef = ref(null);
const loading = ref(false);

const form = reactive({
  nickname: '',
  name: '',
  password: '',
  remark: ''
});

const rules = {
  nickname: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '用户名长度在2到20个字符之间', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 4, max: 20, message: '账号长度在4到20个字符之间', trigger: 'blur' },
    { 
      pattern: /^[a-zA-Z0-9_]+$/,
      message: '账号只能包含字母、数字和下划线',
      trigger: 'blur'
    }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 8, message: '密码长度不能少于8个字符', trigger: 'blur' },
    {
      pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d@$!%*?&]{8,}$/,
      message: '密码必须包含大小写字母和数字',
      trigger: 'blur'
    }
  ]
};

const submitForm = async () => {
  if (!formRef.value) return;
  
  try {
    await formRef.value.validate();
  } catch (error) {
    return;
  }

  loading.value = true;
  try {
    const response = await registerUser(form);
    if (response.data.code === 200) {
      ElMessage.success('用户注册成功');
      resetForm();
    } else {
      ElMessage.error(response.data.msg || '注册失败');
    }
  } catch (error) {
    ElMessage.error('注册失败：' + error.message);
  } finally {
    loading.value = false;
  }
};

const resetForm = () => {
  if (formRef.value) {
    formRef.value.resetFields();
  }
};
</script>

<style scoped>
.register-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  color: #293462;
}

.register-button {
  width: 120px;
}

:deep(.el-input__wrapper) {
  background-color: #f5f7fa;
}

:deep(.el-button--primary) {
  background-color: #293462;
}

:deep(.el-button--primary:hover) {
  background-color: #1e2a4a;
}
</style> 